<template>
  <div class="page-index">
    <PageHeader title="智能发票夹"></PageHeader>
    <div class="index_top">
      <!-- <van-grid :column-num="4">
                    <van-grid-item v-for="(item,index)  in channel" :key="index" :icon="item.icon" :text="item.text" :badge="item.num"/>
    
                </van-grid> -->
      <div class="index_top_Remember">
        <div class="index_top_Remember_icon" @click="tonewCost()">
          <img src="../../assets/index/iconRem.png" alt="" />
        </div>
        <div class="index_top_Remember_title">记费用</div>
      </div>
      <div class="index_top_Photo">
        <div class="index_top_Photo_icon">
          <img src="../../assets/index/iconPhoto.png" alt="" />
        </div>
        <div class="index_top_Photo_title">智能识票</div>
      </div>
    </div>
    <div class="index_center">
      <div class="my_money">
        <div class="my_money_left">
          <div class="my_money_left_title">
            我的费用
            <van-badge dot>
              <span class="my_money_left_nume">4条</span>
            </van-badge>
          </div>
          <div class="my_money_left_titles">
            待报销总金额CNY ： <span class="my_money_left_nums">21,050.00</span>
          </div>
        </div>
        <div class="my_money_right">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="index_bottom">
      <div class="my_money">
        <div class="my_money_left">
          <div class="my_money_left_title">
            我的单据
            <van-badge dot>
              <span class="my_money_left_nume">4条</span>
            </van-badge>
          </div>
          <div class="my_money_left_titles">
            未到账金额CNY ： <span class="my_money_left_nums">750</span>
          </div>
        </div>
        <div class="my_money_right">
          <van-icon name="arrow" />
        </div>
        <div class="index_bottom_list">
          <div class="index_bottom_list_one">
            快递费报销 <span>结算中</span>
          </div>
          <div class="index_bottom_list_two">
            <div class="index_bottom_listnum">
              2022-05-19 <span>等待出纳支付</span>
            </div>
            <div class="index_bottom_list_money">￥ <span>340.00</span></div>
          </div>
          <div class="index_bottom_list_banner">普通报销</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageHeader from "../../../src/components/header";
export default {
  data() {
    return {
      channel: [
        {
          icon: "../../assets/index/iconRem.png",
          text: "记费用",
        },
        {
          icon: "../../assets/index/iconPhoto.png",
          text: "智能识票",
        },
      ],
    };
  },
  components: {
    PageHeader,
  },
  methods:{
      // 跳转到新建费用页面
      tonewCost(){
        this.$router.push({
          path:'/newCost',
          query:{

          }
        })
      },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .header-back {
  display: none;
}
.index_top {
  background: rgba(23, 119, 255, 1);
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  padding-bottom: 30px;
  .index_top_Remember {
    text-align: center;
    .index_top_Remember_icon img {
      width: 30px;
      height: 30px;
    }
    .index_top_Remember_title {
      color: rgba(255, 255, 255, 1);
      font-size: 12px;
      margin-top: 5px;
    }
  }
}

.index_top_Photo {
  text-align: center;
  .index_top_Photo_icon img {
    width: 30px;
    height: 30px;
  }
  .index_top_Photo_title {
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    margin-top: 5px;
  }
}
.index_center {
  background: rgba(250, 250, 250, 1);

  border-top: 1px solid transparen;
  position: relative;
  top: -15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  border-top: 1px solid transparent;
  .my_money {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 8px rgb(238 238 238);
    border-radius: 8px;
    margin: 20px 16px 0;
    position: relative;

    .my_money_left {
      .my_money_left_title {
        padding: 16px 0 0 24px;

        font-weight: 700;
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        .my_money_left_nume {
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
        }
        .van-badge--dot {
          width: 2.06667vw !important;

          height: 2.06667vw !important;
        }
      }
      .my_money_left_titles {
        padding: 9px 0 16px 25px;
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        .my_money_left_nums {
          color: rgba(23, 119, 255, 1);
          font-size: 14px;
        }
      }
    }
    .my_money_right {
      position: absolute;
      color: rgba(204, 204, 204, 1);
      font-size: 25px;
      right: 15px;
      top: 33%;
    }

  }
}
.index_bottom {
  background: rgba(250, 250, 250, 1);

  border-top: 1px solid transparen;
  position: relative;
  top: -15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  border-top: 1px solid transparent;
  .my_money {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 8px rgb(238 238 238);
    border-radius: 8px;
    margin: 20px 16px 0;
    position: relative;
        padding-bottom: 16px;
    .my_money_left {
      .my_money_left_title {
        padding: 16px 0 0 24px;

        font-weight: 700;
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        .my_money_left_nume {
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
        }
        .van-badge--dot {
          width: 2.06667vw !important;

          height: 2.06667vw !important;
        }
      }
      .my_money_left_titles {
        padding: 9px 0 16px 25px;
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        .my_money_left_nums {
          color: rgba(23, 119, 255, 1);
          font-size: 14px;
        }
      }
    }
    .my_money_right {
      position: absolute;
      color: rgba(204, 204, 204, 1);
      font-size: 25px;
      right: 15px;
      top: 33%;
    }
        .index_bottom_list {
      background: rgba(252, 252, 252, 1);
      border: 1px solid rgba(245, 245, 245, 1);
      border-radius: 4px;
      margin: 10px 16px 0;
      position: relative;
      padding-bottom: 13px;
      .index_bottom_list_one {
        color: rgba(0, 0, 0, 1);
        font-size: 14px;
        font-weight: 700;
        padding: 15px 0 0 15px;
        .index_bottom_list_one span {
          color: rgba(67, 207, 124, 1);
          font-size: 10px;
          border: 1px solid rgba(67, 207, 124, 1);
          margin-left: 10px;
        }
      }
      .index_bottom_list_two {
        justify-content: space-between;
        margin: 10px 0 0 15px;
        display: flex;
        .index_bottom_listnum {
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
          .index_bottom_listnum span {
            color: rgba(153, 153, 153, 1);
            font-size: 12px;
            margin-left: 10px;
          }
        }
        .index_bottom_list_money{
          color: rgba(51, 51, 51, 1);
    font-size: 18px;
        }
      }
      .index_bottom_list_banner{
        position: absolute;
    top: 0px;
 
    right: 0px;
    color: rgba(23, 119, 255, 1);
  

  
    font-size: 12px;

    padding: 4px;
    background: rgba(23, 119, 255, 0.1);
      }
    }
  }
}
</style>

